<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
	<head>
		<meta charset="utf-8">
	</head>
	<body style="height: 100%; margin: 0">
		<div id="container" style="height: 95%"></div>

		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>

		<script type="text/javascript">
			var dom = document.getElementById('container');
			var myChart = echarts.init(dom, null, {
				renderer: 'canvas',
				useDirtyRect: false
			});

			myChart.showLoading();
			var mapData = $.parseJSON($.ajax({
				url: "data/abilityMap.json", //json文件位置，文件名
				dataType: "json", //返回数据格式为json
				async: false
			}).responseText);
			var mapData_23 = $.parseJSON($.ajax({
				url: "data/abilityMap_23.json", //json文件位置，文件名
				dataType: "json", //返回数据格式为json
				async: false
			}).responseText);
			myChart.hideLoading();

			function getLevelOption() {
				return [{
						upperLabel: {
							show: false
						}
					},
					{
						itemStyle: {
							borderColor: '#777',
							borderWidth: 5,
							gapWidth: 1
						},
					},
					{
						itemStyle: {
							borderColor: '#aaa',
							borderWidth: 5,
							gapWidth: 1
						},
					},
					{
						itemStyle: {
							borderColor: '#eee',
							borderWidth: 0,
							gapWidth: 1
						},
					},

				];
			};

			var option = {
				title: {
					text: '聚变能力地图',
					left: 'center'
				},

				tooltip: {
					formatter: function(info) {
						var value = info.value;
						var treePathInfo = info.treePathInfo;
						var treePath = [];
						for (var i = 1; i < treePathInfo.length; i++) {
							treePath.push(treePathInfo[i].name);
						};
						var ret = [];
						if (treePath.length === 3) {
							debugger;
							ret = [
								'<div class="tooltip-title">' +
								echarts.format.encodeHTML(treePath.join('/')) +
								'</div>',
								'技术: 1 项<br>',
								//'组织现状', '需求时间','建设思路'
								'技术定位: ' + info.data.技术定位 + '<br>',
								'组织现状: ' + info.data.组织现状 + '<br>',
								'需求时间: ' + info.data.需求时间 + '<br>',
								'建设思路: ' + info.data.建设思路 + '<br>'
							]
						} else {
							ret = [
								'<div class="tooltip-title">' +
								echarts.format.encodeHTML(treePath.join('/')) +
								'</div>',
								'技术: ' + info.data.num + ' 项;'
							]
						}
						return ret.join('');
					}
				},
				series: [{
					name: '聚变能力地图',
					type: 'treemap',
					visibleMin: 300,
					label: {
						show: true,
						formatter: '{b}'
					},
					upperLabel: {
						show: true,
						height: 30
					},
					itemStyle: {
						borderColor: '#777'
					},
					levels: getLevelOption(),
					data: mapData
				}]
			};

			var option_23 = {
				title: {
					text: '聚变能力地图(2023年)',
					left: 'center'
				},

				tooltip: {
					formatter: function(info) {
						var value = info.value;
						var treePathInfo = info.treePathInfo;
						var treePath = [];
						for (var i = 1; i < treePathInfo.length; i++) {
							treePath.push(treePathInfo[i].name);
						};
						var ret = [];
						if (treePath.length === 3) {
							debugger;
							ret = [
								'<div class="tooltip-title">' +
								echarts.format.encodeHTML(treePath.join('/')) +
								'</div>',
								'技术: 1 项<br>',
								//'组织现状', '需求时间','建设思路'
								'技术定位: ' + info.data.技术定位 + '<br>',
								'组织现状: ' + info.data.组织现状 + '<br>',
								'需求时间: ' + info.data.需求时间 + '<br>',
								'建设思路: ' + info.data.建设思路 + '<br>'
							]
						} else {
							ret = [
								'<div class="tooltip-title">' +
								echarts.format.encodeHTML(treePath.join('/')) +
								'</div>',
								'技术: ' + info.data.num + ' 项;'
							]
						}
						return ret.join('');
					}
				},
				series: [{
					name: '聚变能力地图',
					type: 'treemap',
					visibleMin: 300,
					label: {
						show: true,
						formatter: '{b}'
					},
					upperLabel: {
						show: true,
						height: 30
					},
					itemStyle: {
						borderColor: '#777'
					},
					levels: getLevelOption(),
					data: mapData_23
				}]
			};


			if (option && typeof option === 'object') {
				myChart.setOption(option);
			};

			function switchModule(module_name) {
				if (module_name === 'all') {
					myChart.setOption(option)
				} else if (module_name === '2023') {
					myChart.setOption(option_23)
				}
			};

			// switchModule('2023')

			window.addEventListener('resize', myChart.resize);
		</script>
	</body>
</html>